<template>
  <div class="bg">
    <!-- line_box  是为了文字的效果 -->
    <div class="line_box">
      <!-- bg_line 是横线 -->
      <div class="bg_line">
        <!-- line_text 是装 圆点和文字的盒子 -->
        <div class="line_text">
          <div class="dian" v-for="(item,index) in list" :key="item">
            <!-- 圆点 -->
            <p><i></i></p>
            <!-- 文字 -->
            <span>文字{{ item }}--{{index}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,1,2],
    };
  },
  methods:{
    move(){

    }
  }
};
</script>

<style scoped>
.bg {
  background-color: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.line_box {
  margin-top: 20px;
  /* 为了使点在线上 */
  padding-top: 5px;
  position: relative;
  height: 40px;
  width: 496px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #fff9f9;
  background: linear-gradient(
    -13deg,
    rgba(0, 255, 251, 0) 0%,
    rgba(0, 255, 251, 0.84) 50%,
    rgba(0, 255, 251, 0) 100%
  );
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  /* border: #00b0b0 1px solid; */
  overflow: hidden;
}

.bg_line {
  width: 496px;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(0, 255, 251, 0),
    rgba(0, 255, 251, 0.84),
    rgba(0, 255, 251, 0)
  );
}
.line_text {
  width: 700%;
  height: 100%;
  position: absolute;
  left: -200px;
}
.dian {
  display: inline-block;
  width: 100px;
  text-align: center;
  margin-top: -5px; /* 为了使点在线上 */
  /* background: linear-gradient(
    -13deg,
    rgba(228, 12, 217, 0.5) 0%,
    rgba(0, 255, 251, 0.2) 100%
  ); */
}
.dian p {
  width: 100%;
  text-align: center;
}
.dian i {
  width: 10px;
  height: 10px;
  border: 2px solid #00b0b0;
  display: inline-block;
  border-radius: 50%;
}
.dian span {
  /* background-color: #fff; */
}
</style>